{include file="common/header"/}
<!--自定义JS-->
<!--<script src="__DEMO__/index_v2.js"></script>-->
</head>
<!--处理打印显示title和url 的问题-->
<style>
    @page {
        /*size: landscape;  !* auto is the initial value *!*/
        margin: 0mm 10mm 0mm 10mm
    }
    body {
        /*size: landscape;  !* auto is the initial value *!*/
      height: 200px;
    }
</style>
<body class="gray-bg">
<div class="wrapper">
    <div class="row">
        <div class="layui-row">
            <!--筛选条件-->
            <div class="layui-col-xs6">
                <form class="layui-form" action="">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="interest" lay-filter="aihao">
                                <option value="0"  selected="">全部订单</option>
                                <option value="1">待处理订单</option>
                                <option value="2">未完成订单</option>
                                <option value="3">已完成订单</option>
                                <option value="4">已作废订单</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <input type="text" class="layui-input" id="search_date" placeholder="开始 到 结束">
                    </div>
                    <div class="layui-inline">
                        <a style="margin-left: 10px" href="#">高级搜索</a>
                    </div>
                </form>
            </div>
            <div class="layui-col-xs6 ">
              <div class="float_right">
                  <button type="button" class="layui-btn layui-btn-primary">导入</button>
                  <button type="button" class="layui-btn">导出</button>
                  <button type="button" class="layui-btn layui-btn-normal show-add-html-htn">添加</button>
              </div>
            </div>
        </div>
        <table class="layui-hide" id="order_table" lay-filter="order_table"></table>

        <script type="text/html" id="toolbarDemo">

            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addOrderData">添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addOrderData">导入</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addOrderData">导出</button>
                <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
                <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
                <!--<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
            </div>
        </script>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="view">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</div>
<script>
    layui.use(['table', 'laydate','form'], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;
        var layer = layui.layer;

        laydate.render({
            elem: '#search_date'
            , type: 'datetime'
            , range: '到'
            , format: 'yyyy年M月d日'
        });
        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow

        table.render({
            elem: '#order_table'
            ,url: '{:url("/printer/Order/getData")}'
//                ,toolbar: '#toolbarDemo'
            , title: '下单数据表'
            , defaultToolbar: false
            , totalRow: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                , {field: 'order_id', title: '订单编号', width: 200,fixed: 'left'}
                , {field: 'by_user', title: '下单人',width: 120,}
                , {field: 'customer_unit', title: '客户单位',width: 200,}
                , {field: 'customer_address', title: '单位地址',width: 300,}
                , {field: 'customer_name', title: '联系人',width: 80,}
                , {field: 'customer_tel', title: '电话',width: 150,}
                , {field: 'invoice_type', title: '发票类型',width: 150,}
                , {field: 'price_total_all', title: '下单金额', sort: true, totalRow: true,width: 180}
                , {field: 'pay_price', title: '支付金额', sort: true, totalRow: true,width: 180,}
                , {field: 'order_date', title: '下单时间', width: 180,fixed: 'right'}
                , {
                    field: 'status',fixed: 'right', event: 'setStatus', style:'cursor: pointer;', title: '状态', width: 100,  templet: function (res) {
                        //1:正在出货2:交付完成3:已开票4:货款已付清
                        var status = {};
                        status[1] = '出货中';
                        status[2] = '交付完成';
                        status[3] = '已开票';
                        status[4] = '货款已付清';
                        return '<em>' + status[res.status] + '</em>'
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}

            ]],
            id: 'order_table_reload'
            , page: true
        });



        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选')
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(order_table)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    del(data.id);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.msg('正在开发中');return;
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }else if(obj.event === 'recode'){
                layer.msg('正在开发中');return;
            }else if(obj.event === 'view'){
                $.ajax({
                    url: '{:url("/printer/Order/view")}',
                    type: 'get',
                    dataType: 'html',
                    data: {id:data.id},
                    cache: false,
                    async: true,
                    beforeSend: function () {
                        var index = layer.load(1, {
                            shade: [0.1, '#fff'], time: 3 * 1000 //0.1透明度的白色背景
                        });
                    },
                    complete: function () {
                        layer.closeAll('loading');
                    },
                    success: function (res) {
                        layer.open({
                            type: 1,
                            title:'查看打印机耗材采购结算签收单',
                            content: res,
                            area: ['100%', '85%'],
                            shadeClose:true,
                            maxmin:true,
                        });
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert('网络失败，请联系管理员', {icon: 2});
                    }
                });
            }else if(obj.event === 'setStatus'){
//                layer.open({
//                    formType: 2
//                    ,title: '修改 ID 为 ['+ data.id +'] 的用户签名'
//                    ,value: data.sign
//                });
                //监听单元格事件
                $('#order_id').val(data.id);
                layer.open({
                    type: 1
                    ,area: ['300px', '300px']
                    ,title: '修改 ID 为 ['+ data.order_id +'] 的状态'
                    ,content: $('#update_status')
                });
            }
        });

        //操作js
        //点击添加按钮
//        function show_add_html() {
//            $.ajax({
//                url: '{:url("/printer/Order/add")}',
//                type: 'get',
//                dataType: 'html',
//                cache: false,
//                async: true,
//                beforeSend: function () {
//                    var index = layer.load(1, {
//                        shade: [0.1, '#fff'], time: 3 * 1000 //0.1透明度的白色背景
//                    });
//                },
//                complete: function () {
//                    layer.closeAll('loading');
//                },
//                success: function (res) {
//                    layer.open({
//                        type: 1,
//                        title:'添加打印机耗材采购结算签收单',
//                        content: res,
//                        area: ['100%', '600px'],
//                        shadeClose:true,
//                        maxmin:true,
//                        end:function(){
//                            table.reload('inventory_table_eload', {
//                                page: {
//                                    curr: 1 //重新从第 1 页开始
//                                }
//                            }, 'data');
//                        }
//                    });
//                    form.render('select');
//                },
//                error: function (XMLHttpRequest, textStatus, errorThrown) {
//                    layer.alert('网络失败，请联系管理员', {icon: 2});
//                }
//            });
//        }
        $(document).on('click', '.show-add-html-htn', function () {
//            show_add_html();
            layer.open({
                type: 1,
                title:'添加打印机耗材采购结算签收单',
                content: $('#add'),
                area: ['100%', '80%'],
                shadeClose:true,
                maxmin:true,
                offset: '60px',
                end:function(){
                    table.reload('inventory_table_eload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    }, 'data');
                }
            });
        });
        //删除
        function del(id){
            $.ajax({
                url: '{:url("/printer/Order/del")}',
                type: 'get',
                data : {id:id},
                cache: false,
                async: true,
                beforeSend: function () {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'], time: 3 * 1000 //0.1透明度的白色背景
                    });
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    if(res.code > 0){
                        layer.msg(res.msg);
                        table.reload('order_table_reload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }, 'data');
                        return false;
                    }else{
                        layer.msg(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('网络失败，请联系管理员', {icon: 2});
                }
            });
        }
    });
</script>
{include file="common/footer"/}
</body>
<div style="display: none" id="add">
    <form class="layui-form" action="">
        <div class="layui-form">
            <table class="layui-table">
                <colgroup>
                    <col width="10%">
                    <col width="90%">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th colspan="2" style="text-align: center">新乡市信创打印机耗材采购结算签收单</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>开票信息</td>
                    <td>
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <select name="invoice_type" id="invoice_type" lay-verify="required">
                                    <option value="不开票">不开票</option>
                                    <option value="增值税普通发票">增值税普通发票</option>
                                    <option value="增值税专用发票">增值税专用发票</option>
                                </select>
                            </div>
                        </div>


                    </td>
                </tr>
                <tr>
                    <td>选择客户</td>
                    <td>
                        <div class="layui-form-item">
                            <div class="layui-input-inline customer">
                                <select name="customer_unit" id="customer" lay-verify="required" lay-filter="customer-select" lay-search="">
                                </select>
                            </div>
                            <input type="hidden" name="customer_unit" id="customer_unit" >
                            <div class="layui-input-inline">
                                <input type="text" name="customer_name" id="customer_name"   autocomplete="off" placeholder="客户姓名" class="layui-input">
                            </div>
                            <div class="layui-input-inline " style="width: 30%">
                                <input type="text" name="customer_address" id="customer_address"  autocomplete="off" placeholder="地址" class="layui-input">
                            </div>
                            <div class="layui-input-inline ">
                                <input type="text" name="customer_tel" id="customer_tel" autocomplete="off" placeholder="电话" class="layui-input">
                                <input type="hidden" name="customer_id" id="customer_id" autocomplete="off"  class="layui-input">
                            </div>
                        </div>


                    </td>
                </tr>
                <tr>
                    <td>添加耗材<i class="layui-icon layui-icon-addition add_inventory" style="font-size: 16px; color: #1E9FFF;"></i>  </td>
                    <td>
                        <table class="layui-table" >
                            <colgroup>
                                <col width="200">
                                <col width="200">
                                <col width="130">
                                <col width="100">
                                <col width="150">
                                <col width="150">
                                <col width="350">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>打印机型号</th>
                                <th>耗材型号</th>
                                <th>打印页数</th>
                                <th>采购单价/支</th>
                                <th>采购数量</th>
                                <th>合计</th>
                                <!--<th>状态</th>-->
                                <th>备注</th>
                            </tr>
                            </thead>
                            <tbody id="inventory_list_div">
                            <!--{for start="1" end="4"}-->
                            <!--<tr>-->
                                <!--&lt;!&ndash;<td>&ndash;&gt;-->
                                <!--&lt;!&ndash;<i class="layui-icon layui-icon-subtraction"></i>&ndash;&gt;-->
                                <!--&lt;!&ndash;<i class="layui-icon layui-icon-addition"></i>&ndash;&gt;-->
                                <!--&lt;!&ndash;</td>&ndash;&gt;-->
                                <!--<td>-->
                                    <!--<div class="layui-input-inline">-->
                                        <!--&lt;!&ndash;<select name='print_type[]' lay-filter="print_type" data-index="{$i}">&ndash;&gt;-->
                                        <!--&lt;!&ndash;<option value="M7105DN" selected="">M7105DN</option>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<option value="CM8505DN/M9505DN">CM8505DN/M9505DN</option>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<option value="CM7115DN">CM7115DN</option>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<option value="P5515DN">P5515DN</option>&ndash;&gt;-->
                                        <!--&lt;!&ndash;</select>&ndash;&gt;-->
                                    <!--</div>-->
                                <!--</td>-->
                                <!--<td>-->
                                    <!--<div class="layui-input-inline">-->
                                        <!--&lt;!&ndash;<select name="consumable_type[]" id="consumable_type_"' + index + ' data-index="{$i}" lay-filter="consumable_type">&ndash;&gt;-->
                                        <!--&lt;!&ndash;<option value="">请选择</option>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<option value="粉盒TL-413">粉盒TL-413</option>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<option value="粉盒TL-413H">粉盒TL-413H</option>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<option value="鼓组件DL-413">鼓组件DL-413</option>&ndash;&gt;-->
                                        <!--&lt;!&ndash;</select>&ndash;&gt;-->
                                    <!--</div>-->
                                <!--</td>-->
                                <!--<td>-->
                                    <!--<input type="text" id="page_num_"' + index + ' name="page_num[]"  autocomplete="off"-->
                                           <!--class="layui-input">-->
                                <!--</td>-->
                                <!--<td>-->
                                    <!--<input type="text" id="price_"' + index + ' name="price[]"  autocomplete="off"-->
                                           <!--class="layui-input">-->
                                <!--</td>-->
                                <!--<td>-->
                                    <!--<input type="text" id="num" data-index="{$i}" name="num[]"  autocomplete="off"-->
                                           <!--class="layui-input">-->
                                <!--</td>-->
                                <!--<td>-->
                                    <!--<input type="text" id="price_total_"' + index + ' name="price_total[]"  autocomplete="off"-->
                                           <!--class="layui-input price-item-total">-->
                                <!--</td>-->
                                <!--&lt;!&ndash;<td></td>&ndash;&gt;-->
                                <!--<td>-->
                                    <!--<input type="text" name="comment[]"  autocomplete="off" class="layui-input">-->
                                <!--</td>-->
                            <!--</tr>-->
                            <!--{/for}-->
                            </tbody>
                        </table></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="layui-form-item">
                            <div class="layui-inline" style="width: 30%">
                                <label class="layui-form-label" style="width: 20%">申请特价:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="apply_price"  autocomplete="off" placeholder="请输入特价金额" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline" style="width: 30%">
                                <label class="layui-form-label" style="width: 20%">合计:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="price_total_all" id="price_total_all"   autocomplete="off" placeholder="0.00" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline" style="width: 30%">
                                <label class="layui-form-label" style="width: 20%">应付金额:</label>
                                <div class="layui-input-inline">
                                    <input type="test" name="pay_price" id="pay_price"  autocomplete="off" placeholder="0.00" class="layui-input">
                                </div>
                            </div>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="layui-form-item">
                            <div class="layui-inline" style="width: 30%">
                                <label class="layui-form-label" style="width: 20%">备注:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="order_comment"  autocomplete="off" placeholder="请输入备注" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline" style="width: 30%">
                                <label class="layui-form-label" style="width: 20%">交货日期:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="delivery_time" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="addData">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        var inventory_div_index
        layui.use(['form', 'laydate'], function () {
            var form = layui.form
                , laydate = layui.laydate
                , layer = layui.layer;
            //交货日期
            laydate.render({
                elem: '#date'
            });

            //得到耗材添加到订单
        function show_add_inventory_html() {
            $.ajax({
                url: '{:url("/printer/Order/addInventory")}',
                type: 'get',
                dataType: 'html',
                cache: false,
                async: true,
                beforeSend: function () {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'], time: 3 * 1000 //0.1透明度的白色背景
                    });
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    layer.open({
                        type: 1,
                        title:'选择耗材',
                        content: res,
                        area: ['100%', '600px'],
                        maxmin:true,
                        shadeClose:true,
                        offset: '20px',
                        end:function(){
                        console.log( $('#check_data').html())
                        }
                    });
                    form.render('select');
                    return false;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('网络失败，请联系管理员', {icon: 2});
                }
            });
        }
//
//        //添加耗材
//        //双击会触发两次单击事件的解决方案
//        var timeId;
//        function test() {
//            clearTimeout(timeId);
//            timeId = setTimeout(function () {
//                show_add_inventory_html();
//            }, 250);
//        }
            $(document).on('click', '.add_inventory',function(){
//            show_add_inventory_html();
                inventory_div_index = layer.open({
                    type: 1,
                    title:'选择耗材',
                    content: $('#inventory-div'),
                    area: ['100%', '600px'],
                    maxmin:true,
                    shadeClose:true,
                    offset: '20px',
                    end:function(){
//                        console.log( $('#check_data').html())
                    }
                });
            });
            //得到耗材型号
            function get_consumable_type(data, index) {
                var params = {
                    print_type: data.value
                };
                console.log(index);
                $.ajax({
                    url: '{:url("/printer/Consumable/get_consumable_type")}',
                    dataType: 'json',
                    type: 'post',
                    data: params,
                    success: function (data) {
                        $('#consumable_type_' + index).empty();
                        var page_num = $("#page_num_" + index);
                        var price = $("#price_" + index);
                        page_num.val('');
                        price.val('');
                        $('#consumable_type_' + index).append(new Option('', '请选择'));
                        $.each(data, function (key, item) {
                            $('#consumable_type_' + index).append(new Option(item.consumable_type, item.consumable_type));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");//重新渲染 固定写法
                    }
                });
            };

            //得到页数和价格
            function get_page_price(data, index) {
                var params = {
                    consumable_type: data.value
                }
                //检查项目添加到下拉框中
                $.ajax({
                    url: '{:url("/printer/Consumable/get_page_price")}',
                    dataType: 'json',
                    data: params,
                    type: 'post',
                    success: function (data) {
                        var page_num = $("#page_num_" + index);
                        var price = $("#price_" + index);
                        page_num.val('');
                        price.val('');
                        page_num.val(data.page_num);
                        price.val(data.price);
                    }
                });
            };
            //得到客户信息
            function get_customer_info() {
                $.ajax({
                    url: '{:url("/printer/Order/getCustomerInfo")}',
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        $('#customer').empty();
                        $('#customer').append(new Option('直接选择或搜索选择', ''));// 下拉菜单里添加元素
                        $.each(data, function (key, item) {
                            $('#customer').append(new Option(item.unit_name, item.id));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");//重新渲染 固定写法
                    }
                });
            };
            get_customer_info();
            //客户信息
            form.on('select(customer-select)', function (data) {
                $.ajax({
                    url: '{:url("/printer/Order/getCustomerInfo")}',
                    dataType: 'json',
                    type: 'get',
                    data: {id:data.value},
                    success: function (data) {
                        console.log(data);
                        $('#customer_unit').val(data.unit_name);
                        $('#customer_name').val(data.user_name);
                        $('#customer_address').val(data.address);
                        $('#customer_tel').val(data.tel);
                        $('#customer_id').val(data.id);
                    }
                });
            });

//        // 联动
//        form.on('select(print_type)', function (data) {
//            var index = data.elem.dataset.index;
//            get_consumable_type(data, index);
//        });
//        form.on('select(consumable_type)', function (data) {
//            var index = data.elem.dataset.index;
//            get_page_price(data, index);
//        });

            //计算总价格
            function price_total(price, num, index) {
                $('#price_total_' + index).val(price * num);
                $('#price_total_all').val();
            }
//        price_total_all   pay_price
            $(document).on('change', '#num', function () {
                var index = $(this).data('index');

                var price = $('#price_' + index).val();
                var num = $(this).val();
                price_total(price, num, index);
                price_all();

            });
            //计算合计 应付金额
            function price_all(){
                var items = $('.price-item-total');
                var price_total_num = 0;
                items.each(function(){
                    price_total_num +=  +$(this).val();
                });

                $('#price_total_all').val(price_total_num);
                $('#pay_price').val(price_total_num);
            }
            $(document).on('change', '.price-item-total', function () {
                price_all();
            });

            //监听提交
            form.on('submit(addData)', function (data) {
                $.ajax({
                    url: '{:url("/printer/Order/add")}',
                    type: 'post',
                    dataType: 'json',
                    data: data.field,
                    beforeSend: function () {
                        layer.load(2);
                    },
                    complete: function () {
                        layer.closeAll('loading');
                    },
                    success: function (res) {
                        if (res.code == 1) {
                            layer.msg('添加成功', {icon: 1});
                            location.reload();
                            return false;
                        }
                        layer.alert(res.msg, {icon: 2});
                        return false;
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert('网络失败，请联系管理员', {icon: 2});
                    }
                });
                return false;
            });
        });
    </script>
</div>
<div style="display: none" id="inventory-div">
    <div class="layui-form" style="margin: 16px">
        <div class="row">
            <!--<div class="layui-row">-->
            <!--&lt;!&ndash;筛选条件&ndash;&gt;-->
            <!--<div class="layui-col-xs6">-->
            <!--<form class="layui-form" action="">-->
            <!--<div class="layui-inline">-->
            <!--<div class="layui-input-inline date-width-300">-->
            <!--<input type="text" class="layui-input" id="search_date" placeholder="开始 到 结束">-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="layui-inline">-->
            <!--<div class="layui-input-inline date-width-300">-->
            <!--<a style="margin-left: 10px" href="#">高级搜索</a>-->
            <!--</div>-->
            <!--</div>-->
            <!--</form>-->
            <!--</div>-->
            <!--</div>-->
            <!--//库存数据表格-->
            <table class="layui-hide" style="width: 500px" id="inventory_table" lay-filter="inventory1" ></table>

            <!--<script type="text/html" id="barDemo">-->
            <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
            <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
            <!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="recode">记录</a>-->
            <!--</script>-->

            <script type="text/html" id="toolbar_inventory">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">确认</button>
                    <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
                    <!--<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
                </div>
            </script>
        </div>
    </div>
    <!--<div class="layui-form-item">-->
    <!--<div class="layui-input-block" style="text-align: center">-->
    <!--<button type="submit" class="layui-btn" lay-submit="" lay-filter="addData">立即提交</button>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div id="check_data"></div>-->
    <script>
        layui.use(['table', 'laydate','form'], function () {
            var table = layui.table;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var form = layui.form;
            //日期
            laydate.render({
                elem: '#search_date'
                , type: 'datetime'
                , range: '到'
                , format: 'yyyy年M月d日'
            });
            //方法级渲染
            table.render({
                elem: '#inventory_table'
                ,url: '{:url("/printer/Inventory/getData")}'
                ,toolbar: '#toolbar_inventory' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: false
                ,cols: [[
                    {checkbox: true, fixed: true}
                    ,{field:'id', title: 'ID', sort: true,width:80 }
                    ,{field:'print_type', title: '打印机型号',width:300}
                    ,{field:'consumable_type', title: '耗材型号',width:200}
                    ,{field:'page_num', title: '打印页数',width:150}
                    ,{field:'price', title: '单价', sort: true,width:150}
                    ,{field:'num', title: '总库存', sort: true,width:100}
                    ,{field:'surplus_num', title: '剩余', sort: true,width:100}
                    ,{field:'create_time', title: '创建时间',width:200}
                    ,{field:'buy_num', title:'下单数量',edit: 'text',width:150}
                    ,{field:'comment', title: '备注',fixed:'right',width:300}
                ]]
                    ,done: function (res, curr, count){
//                        $("table").css("width", "80%");
                    }
                ,page: true
            });
            //计算合计 应付金额
            function price_all(){

                var items = $('.price-item-total');
                var price_total_num = 0;
                items.each(function(){
                    price_total_num +=  +$(this).val();
                });

                $('#price_total_all').val(price_total_num);
                $('#pay_price').val(price_total_num);
            }
            //头工具栏事件
            table.on('toolbar(inventory1)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        if(data.length == 0){
                            layer.msg('请选择耗材');return false;
                        }
                        console.log(data);
//                        展示选择的耗材
                        var tr = '';
                        $.each(data,function(index,val){
                            console.log(index);
                            console.log(val);
                            tr +='<tr>' +
                                '<td>' +
                                '        <input type="text"  name="print_type[]" disabled value="'+ val.print_type +'" autocomplete="off" class="layui-input">' +
                                '    </td>' +
                                '    <td>' +
                                '        <input type="text"  name="consumable_type[]" disabled value="'+ val.consumable_type +'" autocomplete="off" class="layui-input">' +
                                '    </td>' +
                                '    <td>' +
                                '        <input type="text" id="page_num_'+index+'" name="page_num[]" disabled value="'+ val.page_num +'" autocomplete="off" class="layui-input">' +
                                '    </td>' +
                                '    <td>' +
                                '        <input type="text" id="price_'+ index + '" name="price[]" disabled value="'+ val.price +'" autocomplete="off" class="layui-input">' +
                                '    </td>' +
                                '    <td>' +
                                '        <input type="text" id="num" data-index="'+ index +'" name="num[]" value="'+ val.buy_num +'"  autocomplete="off" class="layui-input">' +
                                '    </td>' +
                                '    <td>' +
                                '        <input type="text" id="price_total_'+index+'" name="price_total[]" value="'+ val.buy_num * val.price +'" autocomplete="off" class="layui-input price-item-total">' +
                                '    </td>' +
                                '    <!--<td></td>-->' +
                                '    <td>' +
                                '        <input type="text" name="comment[]" autocomplete="off" class="layui-input">' +
                                '    </td>' +
                                '    <input type="hidden" name="inventory_id[]" value="'+ val.id +'" autocomplete="off" class="layui-input">' +
                                '</tr>';
                            $('#inventory_list_div').empty();
                            $('#inventory_list_div').append(tr);
//                            重新计算一下应付金额
                              price_all();
                        });

                        layer.close(inventory_div_index);
                        $('#check_data').html(JSON.stringify(data));
                        return false;
//                    layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });
        });
    </script>
</div>
<div id="update_status" style="display: none">
    <div class="layui-form" >
        <div class="layui-form-item" style="margin-top: 19px">
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value=""></option>
                        <option value="1">出货中</option>
                        <option value="2">交付完成</option>
                        <option value="3">已开票</option>
                        <option value="4">货款已付清</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" >
                <input type="hidden" name="order_id" id="order_id">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="edit_status">立即提交</button>
            </div>
        </div>
    </div>
    <script>

        layui.use(['table','form'], function () {
            var table = layui.table;
            var form = layui.form
                , layer = layui.layer;

            //监听提交
            form.on('submit(edit_status)', function (data) {
                $.ajax({
                    url: '{:url("/printer/Order/edit_status")}',
                    type: 'post',
                    dataType: 'json',
                    data: data.field,
                    beforeSend: function () {
                        layer.load(2);
                    },
                    complete: function () {
                        layer.closeAll();
                    },
                    success: function (res) {
                        if (res.code == 1) {
                            layer.msg('修改成功', {icon: 1});
                            table.reload('order_table_reload', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            }, 'data');
                            return false;
                            return false;
                        }
                        layer.alert(res.msg, {icon: 2});
                        return false;
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert('网络失败，请联系管理员', {icon: 2});
                    }
                });
                return false;
            });
        });
    </script>
</div>
</html>
